<template>
  <div>
    <el-dialog v-model="showExportSigIn" title="导出" width="500px" :before-close="cancel">
      <div>
         <div class="block">
            <el-form label-position="top">
                  <el-form-item label="导出类型">
                      <el-select v-model="exportValue"  placeholder="Select">
                        <el-option
                          v-for="item in exportTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                </el-form-item>
                <el-form-item label="时间范围">
                      <el-date-picker
                    v-model="Time"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :default-time="defaultTime1"
                    />
                </el-form-item>
            </el-form>
          
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="exportSigin()" :loading="loadings">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import integralApi from "@/api/integralApi.js";
import { ElLoading } from 'element-plus'
const props = defineProps({
  showExportSigIn: Boolean,
});
const { showExportSigIn } = toRefs(props)
const loadings = ref(false)
const Time = ref('')
const defaultTime1 = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
] // '12:00:00', '08:00:00'

const exportValue = ref(1)
const exportTypeList = ref([
  {id: 1, name: '签到明细'},
  {id: 2, name: '签退明细'},
  {id: 3, name: '任务明细'},
])

const exportSigin = async()=> {
      if(!Time.value) {
        ElMessage.warning('请选择导出时间范围')
        return
      }
      loadings.value = true
      const loading = ElLoading.service({
        lock: true,
        text: '数据加载中,请稍后',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      setTimeout(() => {
        loadings.value = false
      }, 500);

      // let formdata = new FormData();
      // formdata.append("", this.$route.params.id);
      // window.open()
      let params = {
        startTime:  String(new Date(Time.value[0]).getTime()),
        // startTime: '1653634125000',
        endTime: String(new Date(Time.value[1]).getTime()),
      }
      // if(Time.value) {
      //   params.startTime = String(new Date(Time.value[0]).getTime())
      //   params.endTime = String(new Date(Time.value[1]).getTime())
      // }



      // xlsx格式 office打不开 wps可以打开问题已解决  需后台生成文件时指定文件格式，不能使用默认的xls格式生成
      let rs = '';
      let name = '';
      if(exportValue.value == 1) {
        rs = await integralApi.exportSigin(params)
        name = '签到明细'
      } else if(exportValue.value == 2) {
        rs = await integralApi.exportSignOut(params)
        name = '签退明细'
      } else if(exportValue.value == 3) {
        rs = await integralApi.exportUserTask(params)
        name = '任务明细'
      } 
    
      loading.close();
      let a = document.createElement("a");
      console.log(rs);
      // ArrayBuffer 转为 Blob
      let blob = new Blob([rs], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 
      });

      let objectUrl = URL.createObjectURL(blob);
      a.setAttribute("href", objectUrl);
      a.setAttribute("download", name);
      a.click();
      
      cancel()
}


const cancel = () => {
    Time.value = ''
  emit("cancelExportSigIn");
  
};
const emit = defineEmits(["cancelExportSigIn"]);
</script>

<style lang="scss" scoped>

</style>
